import React from 'react';
import {Button, Card, Checkbox, Form, Icon, Input, message} from "antd";

const FormItem = Form.Item;

class FormLogin extends React.Component {

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <div>
        <Card title="登录行内表单" style={{marginBottom: "10px"}}>
          <Form layout="inline">
            <FormItem>
              <Input placeholder="请输入用户名" />
            </FormItem>
            <FormItem>
              <Input placeholder="请输入密码" />
            </FormItem>
            <FormItem>
              <Button type="primary">登录</Button>
            </FormItem>
          </Form>
        </Card>


        <Card title="登录水平表单" style={{marginBottom: "10px"}}>
          <Form layout="horizontal" style={{width: "300px"}}>
            <FormItem>
              {
                getFieldDecorator("userName", {
                  rules: [
                    {
                      required: true,
                      message: '用户名不能为空',
                    },
                    {
                      min: 5, max: 10,
                      message: '长度不再范围内'
                    },
                    {
                      pattern: /^\w+$/g,
                      message: '用户名必须为字母或者数字',
                    }
                  ],
                })(
                  <Input prefix={<Icon type="user" />} placeholder="请输入用户名" />
                )
              }

            </FormItem>
            <FormItem>
              {
                getFieldDecorator("passWord", {
                  rules: [],
                })(
                  <Input prefix={<Icon type="lock" />} placeholder="请输入密码" />
                )
              }

            </FormItem>
            <FormItem>
              {
                getFieldDecorator('remember', {
                  initialValue: true,
                  valuePropName: 'checked',
                  rules: []
                })(
                  <Checkbox>记住密码</Checkbox>
                )
              }
              <a href="#" style={{float: "right"}}>忘记密码</a>
            </FormItem>
            <FormItem>
              <Button type="primary" onClick={this.handleSubmit}>登录</Button>
            </FormItem>
          </Form>
        </Card>
      </div>
    );
  }

  handleSubmit = () => {

    let userInfo = this.props.form.getFieldsValue();
    console.log(userInfo);
    this.props.form.validateFields((err, values) => {
      if (!err) {
        message.success(`${userInfo.userName}, login success`);
      }
    })
  }
}


export default Form.create({})(FormLogin);